<!DOCTYPE HTML>
<html>

	<head>

		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		<!-- Bootstrap -->
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/Shop.css" />
	</head>

	<body>
		<div class="Shop_title">菜品信息</div>
		<table class="table table-bordered" id="dataTb">
			<tr class="active">
				<th width="10%">菜品序号</th>
				<th width="20%">菜品名称</th>
				<th>菜品图片</th>
				<th width="20%">操作</th>
			</tr>
		</table>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		$(function() {
			initData();
		});

			//加载初始化数据
		function initData() {

			$.ajax({
				type: "POST",
				url: "http://befull.mcaa.win/FoodSelectAll.action",
				data: {
					shopid: 2
				},
				dataType: "JSONP",
				jsonp: "callback",  //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名,默认为callback
//			    jsonpCallback: "abc",
				success: function (mes){
					for(var i = 0; i < mes.data.length; i++) {
						var dataStr = "<tr><td>" + mes.data[i].foodId + "</td><td>" + mes.data[i].foodName + "</td><td><img src=" + mes.data[i].foodImage + "></td><td><button id='XQ'>详情</button><button id='XG'>修改</button><button>删除</button></td></tr>"
						$("#dataTb").append(dataStr)
					}
				},
				error: function () {
					console.log("请求超时错误!");
				}
			})
		}
		
		
		$("#XQ").click(function() {
			window.location.href = "Food/Foodparticulars.html";
		})
		$("#XG").click(function() {
			window.location.href = "Food/updateFood.html";
		})
	</script>

</html>